<template>
	<view class="page">
		<view class="content">
			<view class="con-input">
				<input class="input" type="text" v-model="searchValue" confirm-type="search" placeholder="城市搜索" @confirm="search"/>
				<i class="iconfont" @click="search">&#xe60a</i>
			</view>
			<view class="title">
				当前位置
			</view>
			<view class="location">
				<view class="location-city" @click="chooseLocate"> <i class="iconfont"
						style="font-size: 12px;margin-right: 10rpx;">&#xe8ff</i>
					{{cname}}
				</view>
				<view class="flex">
					<view class="location-btn" @click="getLocation"> <i class="iconfont"
							style="font-size: 12px;margin-right: 10rpx;">&#xe64c</i>
						重新定位
					</view>
					<!-- <view class="right-text">定位</view> -->
				</view>
			</view>

			<view class="title" v-if="hotCityList.length>0">
				热门城市
				<!-- <view class="right-text">热门</view> -->
			</view>
			<view class="hot-city">
				<view class="hot-city-name" v-for="item in hotCityList" :key="item.id" @click="choseCity(item)">
					{{item.shortname}}
				</view>
			</view>
		</view>
		<view class="letter">
			<u-index-list :index-list="LetterName" inactiveColor="#999" activeColor="#FF5866" :customNavHeight="90">
				<template v-for="(item, index) in city">
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="item.id"></u-index-anchor>
					<!-- #endif -->
					<u-index-item>
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="item.id"></u-index-anchor>
						<!-- #endif -->
						<view class="list-cell" v-for="(cell, indexs) in item.value" :key="indexs"
							@click="choseCity(cell)">
							{{cell.shortname}}
						</view>
					</u-index-item>
				</template>
			</u-index-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				LetterName: [],
				hotCityList: [],
				cityAll:[],
				city: [],
				searchValue: '',
				cname: ""
			}
		},
		onLoad() {
			if (uni.getStorageSync('dw')) {
				this.cname = uni.getStorageSync('dw').shortname
			} else {
				var that = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: r => {
						console.log(r.latitude, r.longitude)
						that.rq.getData('area/getLocation', {
							longitude: r.longitude,
							latitude: r.latitude
						}).then(res => {
							if (res.code == 1) {
								var dw = {
									lng:r.longitude,
									lat:r.latitude,
									id: res.data.id,
									shortname: res.data.name
								}
								uni.setStorageSync('dw', dw)
								that.cname = res.data.name
							}
						})
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {}
				});
			}
			this.getHotCity()
			this.getCityList()
		},
		methods: {
			//获取定位点
			getLetter(name) {
				this.LetterId = name
				uni.pageScrollTo({
					selector: '#' + name,
					duration: 300
				})
			},
			getHotCity() {
				this.rq.getData('area/hot').then(({
					data
				}) => {
					this.hotCityList = data
				})
			},
			getCityList(name) {
				this.rq.getData('area/area',{name:name}).then(({
					data
				}) => {
					this.LetterName = data.indexList
					this.cityAll = data.data
					this.city = this.cityAll
					this.LetterName = this.city.map(item=>{
						return item.id
					})
				})
			},
			getLocation() {
				var that = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: r => {
						console.log(r.latitude, r.longitude)
						that.rq.getData('area/getLocation', {
							longitude: r.longitude,
							latitude: r.latitude
						}).then(res => {
							if (res.code == 1) {
								var dw = {
									lng:r.longitude,
									lat:r.latitude,
									id: res.data.id,
									shortname: res.data.name
								}
								uni.setStorageSync('dw', dw)
								that.cname = res.data.name
							}
						})
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {}
				});
			},
			search() {
				// 遍历数组并进行模糊搜索
				var arr =  this.cityAll.map(group => {
					return {
						...group,
						value: group.value.filter(item => 
							item.shortname.toLowerCase().includes(this.searchValue)
						)
					};
				}).filter(group => group.value.length > 0); // 过滤掉没有匹配项的组
				console.log(arr)
				this.city = arr
				this.getCityList(this.searchValue)
			},
			choseCity(e) {
				console.log(e)
				let dw = uni.getStorageSync('dw')?uni.getStorageSync('dw'):{}
				console.log(dw)
				dw.shortname = e.shortname
				dw.id = e.id
				uni.setStorageSync('dw', dw)
				uni.navigateBack()
			},
			chooseLocate(){
				uni.navigateBack()
			},
		}
	}
</script>
<style>
	uni-page {
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	.right-text {
		font-size: 12px;
		margin-left: 40rpx;
		padding: 10rpx 10rpx 0;
		color: #999;
	}

	.page {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.flex {
		display: flex;
		align-items: center;

	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.content {
		background-color: #ffffff;

		.title {
			font-size: 14px;
			font-weight: normal;
			line-height: 13px;
			letter-spacing: 0px;
			margin: 30rpx;
			margin-right: 0;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.location {
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;

			.location-city {
				padding: 0 25rpx;
				// width: 140rpx;
				height: 50rpx;
				border-radius: 99px;
				opacity: 1;

				background: #FFEFF0;
				font-size: 13px;
				font-weight: normal;
				line-height: 13px;
				letter-spacing: 0px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
				margin-left: 20rpx;
			}

			.location-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 13px;
				font-weight: normal;
				line-height: 13px;
				letter-spacing: 0px;
				color: #333333;
				margin-right: 60rpx;

			}
		}

		.hot-city {
			margin: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.hot-city-name {
				width: 140rpx;
				height: 50rpx;
				border-radius: 99px;
				opacity: 1;
				background: #F6F6F6;
				font-size: 13px;
				font-weight: normal;
				line-height: 13px;
				letter-spacing: 0px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
				margin-right: 20rpx;
				margin-bottom: 20rpx;

			}

		}
	}

	.letter {
		font-size: 13px;
		font-weight: normal;
		line-height: 13px;
		letter-spacing: 0px;
		color: #333333;

		.text {
			padding: 10rpx 20rpx 20rpx;
		}

		.city {
			background-color: #ffffff;
			padding: 15rpx;
			height: 40rpx;
			line-height: 40rpx;
		}
	}

	.con-input {
		margin: 0 auto 20rpx;
		width: 93.6%;
		height: 64rpx;
		border-radius: 99px;
		opacity: 1;
		background: #FCF9F9;
		box-sizing: border-box;
		border: 1px solid #333333;
		padding: 10rpx 30rpx 10rpx;
		display: flex;
		align-items: center;
		font-size: 13px;
		font-weight: normal;
		line-height: 13px;
		letter-spacing: 0px;

		.input {
			color: gray;
			caret-color: pink;
			width: 96%;
		}
	}
</style>